<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/component.css">
    <style>
        #section_roleUpdate {
            margin: 2px;
        }
        
        .normal_Text {
            margin-left: 10px;
            vertical-align: -2px;
        }
        
        #navigate,
        #role_title,
        #buttonGroup {
            border: 1px solid #ccc;
            margin: 2px;
            padding: 10px 0px;
        }
        
        .roleTable {
            width: 100%;
        }
        
        .roleTable,
        .roleTable td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        
        .module_level {
            width: 300px;
            height: 50px;
        }
        
        .page_level {
            padding-left: 50px;
        }
    </style>
    <script>
        function init() {
            document.querySelectorAll(".module_level").forEach(element => {
                console.log(element);
            });
        }
        window.addEventListener("load", init, false);
    </script>
</head>

<body>
    <nav id="navigate">用户权限管理&nbsp;->&nbsp;角色信息管理</nav>
    <nav id="role_title">
        角色名称：超级管理员
    </nav>
    <section id="section_roleUpdate">
        <table class="roleTable">
            <tbody>
                <tr>
                    <td class="module_level">
                        <input type="checkbox" class="normalCheckbox"><span class="normal_Text">用户权限管理模块</span>
                    </td>
                    <td class="page_level">
                        <input type="checkbox" class="normalCheckbox"><span class="normal_Text">用户信息管理</span>&nbsp;
                        <input type="checkbox" class="normalCheckbox"><span class="normal_Text">角色信息管理</span>&nbsp;
                        <input type="checkbox" class="normalCheckbox"><span class="normal_Text">权限信息管理</span>
                    </td>
                </tr>
                <tr>
                    <td class="module_level">
                        <input type="checkbox" class="normalCheckbox"><span class="normal_Text">邮件管理模块</span>
                    </td>
                    <td class="page_level">
                        <input type="checkbox" class="normalCheckbox"><span class="normal_Text">写邮件</span>&nbsp;
                        <input type="checkbox" class="normalCheckbox"><span class="normal_Text">收邮件</span>&nbsp;
                    </td>
                </tr>
            </tbody>
        </table>
    </section>
    <nav id="buttonGroup" style="text-align: center">
        <button type="button" class="login-button">取消</button>
        <button type="button" class="login-button">保存</button>
    </nav>
</body>

</html>